{% extends "volunteer_base.html" %}
{% load i18n %}
{% block head %}
<title>{% trans "首页" %}</title>
{% load staticfiles %}
<!---响应式框架---->
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}open/css/bootstrap-grid.min.css" />
<!------滚动样式--------->
<link href="https://cdn.bootcdn.net/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css"
    href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/bk.css" />
<link href="https://magicbox.bk.tencent.com/static_api/v3/components_pro/layout6/css/index.css" rel="stylesheet" />
<link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bk-icon-2.0/iconfont.css" rel="stylesheet" />
<link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/components/dialog.css" rel="stylesheet" />
<link href="https://magicbox.bk.tencent.com/static_api/v3/assets/daterangepicker-2.0.5/daterangepicker-2.0.css"
    rel="stylesheet" />
<link href="https://magicbox.bk.tencent.com/static_api/v3/assets/umeditor-1.2.2/themes/default/css/umeditor.css"
    rel="stylesheet" />
<link href="https://magicbox.bk.tencent.com/static_api/v3/assets/select2-3.5.2/select2.css" rel="stylesheet">

<link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/components/form.css" rel="stylesheet">
{{ block.super }}
{% endblock %}

<body>
    {% block bar%}
    <!-- 侧边导航栏start -->
    <div class="bar">
        <div class="sidebar">
            <ul>
                <li>
                    <a href="{{ SITE_URL }}companyHome/"><span class="iconfont icon-zhuye1"></span>主页</a>
                </li>
                <li>
                    <a href="{{ SITE_URL }}checkApply/"><span class="iconfont icon-shenhexiangmu"></span>审核报名</a>
                </li>
                <li>
                    <a href="{{ SITE_URL }}"><span class="iconfont icon-jinru"></span>退出登录</a>
                </li>
            </ul>
        </div>
        <a class="btn">
            <span class="iconfont icon-zhedie"></span>
        </a>

    </div>
    <!-- 侧边导航栏结束 -->
    {% endblock %}

    {% block content %}
    <div class="content">
        <!-- 活动展示区域 -->
        <div class="row" id="part1">
            <div class="col-md-12">
                <div id="news-slider" class="owl-carousel" style="display: block">
                    <div class="post-slide">
                        <div class="post-img">
                            <a href="#"><img src="{{ STATIC_URL }}open/img/post-img-1.jpg" alt=""></a>
                        </div>
                        <div class="post-content">
                            <h3 class="post-title"><a href="#">上海慈善志愿者协会</a></h3>
                            <p class="post-description">
                                具有责任心和奉献精神，男女不限，18-55周岁即可报名
                            </p>
                            <ul class="post-bar">
                                <li><i class="fa fa-calendar"></i>志愿者招募令</li>
                                <li>
                                    <i class="fa fa-folder"></i>
                                    <a href="#">上海</a>
                                    <a href="#">2021-12-01至2021-12-24</a>
                                    <a href="#">25人</a>
                                </li>
                            </ul>
                            <a href="#publishModal" class="apply" data-toggle="modal"
                                data-target="#publishModal">发布活动</a>
                        </div>
                    </div>

                    <div class="post-slide">
                        <div class="post-img">
                            <a href="#"><img src="{{ STATIC_URL }}open/img/post-img-2.jpg" alt=""></a>
                        </div>
                        <div class="post-content">
                            <h3 class="post-title"><a href="#">咸阳红十字协会</a></h3>
                            <p class="post-description">
                                吃苦耐劳，具有奉献精神，男女不限，18-55周岁即可报名
                            </p>
                            <ul class="post-bar">
                                <li><i class="fa fa-calendar"></i> 守护家园，抗疫有我</li>
                                <li>
                                    <i class="fa fa-folder"></i>
                                    <a href="#">咸阳</a>
                                    <a href="#">2021-12-01至2021-12-24</a>
                                    <a href="#">10人</a>
                                </li>
                            </ul>
                            <div class="bk-panel-action">
                                <a href="#publishModal" class="apply" data-toggle="modal"
                                    data-target="#publishModal">发布活动</a>
                            </div>
                        </div>
                    </div>

                    <div class="post-slide">
                        <div class="post-img">
                            <a href="#"><img src="{{ STATIC_URL }}open/img/post-img-3.jpg" alt=""></a>
                        </div>
                        <div class="post-content">
                            <h3 class="post-title"><a href="#">北京志愿者协会</a></h3>
                            <p class="post-description">
                                遵纪守法，服从安排，具有较强的社会公德意识，有志愿者活动经验者优先
                            </p>
                            <ul class="post-bar">
                                <li><i class="fa fa-calendar"></i> 志愿者在行动</li>
                                <li>
                                    <i class="fa fa-folder"></i>
                                    <a href="#">北京</a>
                                    <a href="#">2021-12-01至2021-12-24</a>
                                    <a href="#">30人</a>
                                </li>
                            </ul>
                            <a href="#publishModal" class="apply" data-toggle="modal"
                                data-target="#publishModal">发布活动</a>
                        </div>
                    </div>

                    <div class="post-slide">
                        <div class="post-img">
                            <a href="#"><img src="{{ STATIC_URL }}open/img/post-img-4.jpg" alt=""></a>
                        </div>
                        <div class="post-content">
                            <h3 class="post-title"><a href="#">西安慈善志愿者协会</a></h3>
                            <p class="post-description">
                                乐于奉献，热爱志愿者服务等公益事业，能够利用日常业余时间参加公益活动。
                            </p>
                            <ul class="post-bar">
                                <li><i class="fa fa-calendar"></i> 时代先锋</li>
                                <li>
                                    <i class="fa fa-folder"></i>
                                    <a href="#">西安</a>
                                    <a href="#">2021-12-01至2021-12-24</a>
                                    <a href="#">70人</a>
                                </li>
                            </ul>
                            <a href="#publishModal" class="apply" data-toggle="modal"
                                data-target="#publishModal">发布活动</a>
                        </div>
                    </div>

                    <div class="post-slide">
                        <div class="post-img">
                            <a href="#"><img src="{{ STATIC_URL }}open/img/post-img-5.jpg" alt=""></a>
                        </div>
                        <div class="post-content">
                            <h3 class="post-title"><a href="#">渭南红十字协会</a></h3>
                            <p class="post-description">
                                具有吃苦耐劳精神，自愿参加社区建设服务，自觉按照社区工作安排开展志愿者服务。
                            </p>
                            <ul class="post-bar">
                                <li><i class="fa fa-calendar"></i> 志愿者服务</li>
                                <li>
                                    <i class="fa fa-folder"></i>
                                    <a href="#">渭南</a>
                                    <a href="#">2021-12-01至2021-12-24</a>
                                    <a href="#">25人</a>
                                </li>
                            </ul>
                            <a href="#publishModal" class="apply" data-toggle="modal"
                                data-target="#publishModal">发布活动</a>
                        </div>
                    </div>

                    <div class="post-slide">
                        <div class="post-img">
                            <a href="#"><img src="{{ STATIC_URL }}open/img/post-img-6.jpg" alt=""></a>
                        </div>
                        <div class="post-content">
                            <h3 class="post-title"><a href="#">北京红十字协会</a></h3>
                            <p class="post-description">
                                积极传播志愿服务理念，弘扬志愿服务精神的义务，遵守社区志愿者组织的各项政策。
                            </p>
                            <ul class="post-bar">
                                <li><i class="fa fa-calendar"></i> 青春志愿行</li>
                                <li>
                                    <i class="fa fa-folder"></i>
                                    <a href="#">北京</a>
                                    <a href="#">2021-12-01至2021-12-24</a>
                                    <a href="#">15人</a>
                                </li>
                            </ul>
                            <a href="#publishModal" class="apply" data-toggle="modal"
                                data-target="#publishModal">发布活动</a>
                        </div>
                    </div>

                    <div class="post-slide">
                        <div class="post-img">
                            <a href="#"><img src="{{ STATIC_URL }}open/img/post-img-7.jpg" alt=""></a>
                        </div>
                        <div class="post-content">
                            <h3 class="post-title"><a href="#">深圳志愿者协会</a></h3>
                            <p class="post-description">
                                服从社区志愿者组织的指挥和调配，能够认真完成志愿者工作任务。
                            </p>
                            <ul class="post-bar">
                                <li><i class="fa fa-calendar"></i> 学雷锋活动</li>
                                <li>
                                    <i class="fa fa-folder"></i>
                                    <a href="#">深圳</a>
                                    <a href="#">2021-12-01至2021-12-24</a>
                                    <a href="#">20人</a>
                                </li>
                            </ul>
                            <a href="#publishModal" class="apply" data-toggle="modal"
                                data-target="#publishModal">发布活动</a>
                        </div>
                    </div>

                    <div class="post-slide">
                        <div class="post-img">
                            <a href="#"><img src="{{ STATIC_URL }}open/img/post-img-8.jpg" alt=""></a>
                        </div>
                        <div class="post-content">
                            <h3 class="post-title"><a href="#">志愿者服务队</a></h3>
                            <p class="post-description">
                                有志愿者活动经验的优先，服从社区服务队组织对志愿服务工作岗位的安排。
                            </p>
                            <ul class="post-bar">
                                <li><i class="fa fa-calendar"></i> 广州志愿者服务队</li>
                                <li>
                                    <i class="fa fa-folder"></i>
                                    <a href="#">广州</a>
                                    <a href="#">2021-12-01至2021-12-24</a>
                                    <a href="#">30人</a>
                                </li>
                            </ul>
                            <a href="#publishModal" class="apply" data-toggle="modal"
                                data-target="#publishModal">发布活动</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="row" id="part2">
            <div class="col-md-12">

                <div class="cnmap_nav">
                    <div id="cnmap_sub1" class="se1"><a href="javascript:switchVal(1)">实名注册志愿者人数分布图</a>
                    </div>
                    <div id="cnmap_sub2" class="se2"><a href="javascript:switchVal(2)">志愿团体数量分布图</a></div>
                    <div id="cnmap_sub3" class="se2"><a href="javascript:switchVal(3)">志愿项目数量分布图</a></div>
                    <div id="cnmap_sub4" class="se2"><a href="javascript:switchVal(4)">累计志愿服务时间数量分布图</a></div>
                </div>
                <div class="cnmap">
                    <div class="cnmap_left">
                        <img src="{{ STATIC_URL }}open/img/cnmap1.png" id="cnmap_left_img" class="cnmap_left_img" />
                    </div>
                    <div class="cnmap_right">
                        <div class="tit" id="tit">全国志愿者服务统计</div>
                        <table class="table1">
                            <tr>
                                <td class="l1" id="cell_1_1">实名志愿者总数</td>
                                <td class="l2" id="cell_1_2">1.96亿</td>
                            </tr>
                            <tr>
                                <td class="l1" id="cell_2_1">志愿团体总数</td>
                                <td class="l2" id="cell_2_2">82.57万</td>
                            </tr>
                            <tr>
                                <td class="l1" id="cell_3_1">志愿项目总数</td>
                                <td class="l2" id="cell_3_2">598.91万</td>
                            </tr>
                            <tr>
                                <td class="l1" id="cell_4_1">服务时间总数</td>
                                <td class="l2" id="cell_4_2">32.46亿</td>
                            </tr>
                            <tr>
                                <td class="l1" id="cell_5_1">记录时间人数</td>
                                <td class="l2" id="cell_5_2">5538.82万</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>


        <!-- 公益活动列表 -->
        <div class="page-content" style="width:75%; background: #faefff; color: #888;">
            <div class="bk-collapse-panel">
                <div class="panel-header" role="tab" style="background: #faefff;">
                    <a role="button" data-toggle="collapse" href="#panel-content2" class="panel-icon panel-spread"
                        aria-expanded="true"></a>
                    <h3 role="button" data-toggle="collapse" href="#panel-content2" class="panel-title"
                        style="color: #888;" aria-expanded="true">公益活动列表</h3>
                    <a class="bk-button bk-primary publish" href="#publishModal" data-toggle="modal"
                        data-target="#publishModal" title="发布活动">发布公益活动</a>
                </div>
                <div id="panel-content2" class="panel-body panel-collapse p0 collapse in" aria-expanded="true">
                    <table class="bk-table bk-table-header-bordered" id="activity" style="background-color: #faefff;">
                        <thead>
                            <tr>
                                <th>发布企业</th>
                                <th>要求</th>
                                <th>活动名称</th>
                                <th>时间</th>
                                <th>地点</th>
                                <th>志愿者人数</th>
                                <th>已报名人数</th>
                                <th>已通过人数</th>
                            </tr>
                        </thead>

                    </table>
                </div>
            </div>
        </div>
    </div>



    <!-- 模态框(publishModal) 发布活动 -->
    <div class="modal fade" id="publishModal" tabindex="-1" role="dialog" aria-labelledby="publishModalLabel"
        aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog" style="width: 1000px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="publishModalLabel" style="color: #000000;">填写发布活动信息</h4>
                </div>
                <form id="validate_form_publish" method="post">
                    <!-- 加csrf令牌 -->
                    {% csrf_token %}
                    <div class="bk-form" style="width:900px;padding: 10px" id="validate_form_publish">
                        <input type="hidden" id="publish_id" class="bk-form-input">

                        <div class="bk-form-item is-required">
                            <label class="bk-label" style="width:150px;">发布企业：</label>
                            <div class="bk-form-content" style="margin-left:150px;">
                                <input type="text" class="bk-form-input" id="publish_company_name"
                                    name="publish_company_name" placeholder="请输入发布企业名称">
                            </div>
                        </div>

                        <div class="bk-form-item is-required">
                            <label class="bk-label" style="width:150px;">活动名称：</label>
                            <div class="bk-form-content" style="margin-left:150px;">
                                <input type="text" class="bk-form-input" id="publish_activity_name"
                                    name="publish_activity_name" placeholder="请输入活动名称">
                            </div>
                        </div>
                        <div class="bk-form-item is-required">
                            <label class="bk-label" style="width:150px;">活动时间：</label>
                            <div class="bk-form-content" style="margin-left:150px;">
                                <input type="text" class="bk-form-input daterangepicker_demo" name="publish_datetime"
                                    id="daterangepicker_demo3" placeholder="选择活动时间...">

                            </div>
                        </div>

                        <div class="bk-form-item is-required">
                            <label class="bk-label" style="width:150px;">活动地点：</label>
                            <div class="bk-form-content" style="margin-left:150px;">
                                <input type="text" class="bk-form-input" id="publish_location" name="publish_location"
                                    placeholder="请输入活动地点">
                            </div>
                        </div>
                        <div class="bk-form-item is-required">
                            <label class="bk-label" style="width:150px;">志愿者人数：</label>
                            <div class="bk-form-content" style="margin-left:150px;">
                                <input type="text" class="bk-form-input" id="publish_person_num"
                                    name="publish_person_num" placeholder="请输入本次活动需要的志愿者人数">
                            </div>
                        </div>
                        <div class="bk-form-item is-required">
                            <label class="bk-label" style="width:150px;">活动要求：</label>
                            <div class="bk-form-content" style="margin-left:150px;">
                                <div id="editor4_demo1">
                                    <div id="myEditor" style="width:730px;height:200px;" name="myEditor">
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </form>
                <div class="modal-footer">
                    <button type="button" class="bk-button bk-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="bk-button bk-primary" onclick="savePublish()">发布</button>
                </div>
            </div> <!-- /.modal-content -->
        </div> <!-- /.modal-dialog -->
    </div>

    <!-- 模态框(displayActivityModal)查看活动详情 -->
    <div class="modal fade" id="displayActivityModal" tabindex="1" role="dialog"
        aria-labelledby="displayActivityModalLabel" data-backdrop="static">
        <div class="modal-dialog" style="width: 680px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="displayModalLabel" style="color: #888;">查看活动详情</h4>
                </div>
                <div class="bk-form" style="width:900px;padding: 10px">
                    <div class="bk-form-item">
                        <label class="bk-label" style="width:150px;">发布企业：</label>
                        <div class="bk-form-content" style="margin-left:150px;">
                            <p class="bk-label" id="display_publish_company_name"></p>
                        </div>
                    </div>
                    <div class="bk-form-item">
                        <label class="bk-label" style="width:150px;">活动要求：</label>
                        <div class="bk-form-content" style="margin-left:150px;">
                            <p class="bk-label" id="display_publish_demand"></p>
                        </div>
                    </div>
                    <div class="bk-form-item">
                        <label class="bk-label" style="width:150px;">活动名称：</label>
                        <div class="bk-form-content" style="margin-left:150px;">
                            <p class="bk-label" id="display_publish_activity_name"></p>
                        </div>
                    </div>
                    <div class="bk-form-item">
                        <label class="bk-label" style="width:150px;">活动时间：</label>
                        <div class="bk-form-content" style="margin-left:150px;">
                            <p class="bk-label" style="width: 400px;" id="display_publish_datetime"
                                name="display_publish_datetime"></p>
                        </div>
                    </div>
                    <div class="bk-form-item">
                        <label class="bk-label" style="width:150px;">活动地点：</label>
                        <div class="bk-form-content" style="margin-left:150px;">
                            <p class="bk-label" id="display_publish_location"></p>
                        </div>
                    </div>
                    <div class="bk-form-item">
                        <label class="bk-label" style="width:150px;">需要志愿者人数：</label>
                        <div class="bk-form-content" style="margin-left:150px;">
                            <p class="bk-label" id="display_publish_person_num"></p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="bk-button bk-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>


    {% endblock %}

    {% block extra_block %}

    <!-- 活动展示区域js_part1_start-->
    <script src="{{ STATIC_URL }}js/jquery-1.11.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
    <!-- part1  js  end -->

    <script src="{{ STATIC_URL }}js/bootstrap.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bkDialog-2.0/js/bkDialog.js"></script>

    <!--要引入的文件-开始-->
    <script src="{{ SITE_URL }}static/datatables-1.10.7/jquery.dataTables.js"></script>
    <script src="{{ SITE_URL }}static/datatables-1.10.7/dataTables.bootstrap.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bkMessage-1.0/js/bkMessage.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/validate-1.14.0/js/jquery.validate.js"></script>
    <!--要引入的文件-结束-->

    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/daterangepicker-2.0.5/moment.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/daterangepicker-2.0.5/daterangepicker.js">
    </script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/select2-3.5.2/select2.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/umeditor-1.2.2/umeditor.config.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/umeditor-1.2.2/umeditor.min.js"></script>

    <script>
        // part1_js_start
        $(document).ready(function () {
            $("#news-slider").owlCarousel({
                items: 3,
                itemsDesktop: [1199, 2],
                itemsDesktopSmall: [980, 2],
                itemsMobile: [600, 1],
                pagination: false,
                navigationText: false,
                autoPlay: true
            });
        });
        // part1_js_end

        // cnmap_js_starts
        option = {
            series: [{
                name: '信息量',
                type: 'map',
                geoIndex: 0,
            }]
        };
        // setTimeout(function () {
        // }, 1000)

        // img  的switch函数
        function switchVal(type) {

            for (var i = 1; i <= 4; i++) {
                var ele = document.getElementById('cnmap_sub' + i);
                if (type == i) {
                    ele.className = 'se1';
                } else {
                    ele.className = 'se2';
                }
            }
            if (type == 1) {
                document.getElementById('cnmap_left_img').src = "{{ STATIC_URL }}open//img/cnmap1.png";

            } else if (type == 2) {
                document.getElementById('cnmap_left_img').src = "{{ STATIC_URL }}open//img/cnmap2.png";

            } else if (type == 3) {
                document.getElementById('cnmap_left_img').src = "{{ STATIC_URL }}open//img/cnmap3.png";

            } else if (type == 4) {
                document.getElementById('cnmap_left_img').src = "{{ STATIC_URL }}open//img/cnmap4.png";
            }
        }

        // cnmap_js_end



        //publish_js_start
        //editor4_demo1_js_start
        var editor = UM.getEditor('myEditor');

        //editor4_demo1_js_end

        //选择时间
        $('#daterangepicker_demo3').daterangepicker({
            "showDropdowns": true, //显示年，月下拉选择框
            "showWeekNumbers": true, //显示第几周
            "timePicker": true, //时间选择
            "timePicker24Hour": true, //24小时制
            "timePickerIncrement": 1, //时间间隔
            "timePickerSeconds": true,
            "dateLimit": { //可选择的日期范围
                "days": 60
            },
            "ranges": {
                "前7天": [moment().subtract(6, 'days'), moment()],
                "前30天": [moment().subtract(29, 'days'), moment()],
                "本月": [moment().startOf('month'), moment().endOf('month')],
                "上个月": [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
            },
            "locale": {
                "format": "YYYY-MM-DD HH:mm:ss", // 日期格式
                "separator": " 至 ",
                "applyLabel": "确定",
                "cancelLabel": "取消",
                "fromLabel": "从",
                "toLabel": "到",
                "weekLabel": '周',
                "customRangeLabel": "自定义",
                "daysOfWeek": [
                    "日",
                    "一",
                    "二",
                    "三",
                    "四",
                    "五",
                    "六"
                ],
                "monthNames": [
                    "一月",
                    "二月",
                    "三月",
                    "四月",
                    "五月",
                    "六月",
                    "七月",
                    "八月",
                    "九月",
                    "十月",
                    "十一月",
                    "十二月"
                ],
                "firstDay": 1 // 周开始时间
            },
            "startDate": "2022-01-04 14:30:00",
            "endDate": "2022-01-31 14:30:00",
            "opens": "center", //left/center/right
            "drops": "down", //选择框出现的位置 up/down
            "buttonClasses": "btn btn-sm", //按钮通用样式
            "applyClass": "btn-success", //确定按钮样式
            "cancelClass": "btn-default",//取消按钮样式

            'linkedCalendars': false,
            'autoUpdateInput': false,
            'parentEl': 'ddfdfdf',

        }, function (start, end, label) {
            $('#daterangepicker_demo3').html(start.format('YYYY-MM-DD') + ' 至 ' + end.format('YYYY-MM-DD'));
        });
        $('#validate_form_publish').validate({
            ignore: '.ignore',
            errorElement: 'div', //错误信息的容器
            errorClass: 'is-danger',
            errorPlacement: function (error, element) {
                error.addClass('bk-form-tip').insertAfter(element)
            },
            validClass: "bk-valid",
            //验证规则
            rules: {
                publish_company_name: {
                    required: true,
                },
                publish_activity_name: {
                    required: true,
                },
                publish_datetime: {
                    required: true,
                },
                publish_location: {
                    required: true,
                },
                publish_person_num: {
                    required: true,
                },
            },
            //错误提示信息
            messages: {
                publish_company_name: "<p class='bk-tip-text'>发布企业名称为必填项！</p>  ",
                publish_activity_name: "<p class='bk-tip-text'>公益活动名称为必填项!</p>",
                publish_datetime: "<p class='bk-tip-text'>活动时间为必填项！</p>  ",
                publish_location: "<p class='bk-tip-text'>活动地点为必填项！</p>  ",
                publish_person_num: "<p class='bk-tip-text'>志愿者人数为必填项！</p>",
            }
        });

        function savePublish() {
            let publish_datetime = $('#daterangepicker_demo3').val()
            if (!editor.getContent()) {
                new bkMessage({
                    message: "请输入活动要求！",
                    theme: 'error',
                    delay: 3000
                });
                return false
            }


            if ($('#validate_form_publish').valid()) {
                $.ajax({
                    url: '{{ SITE_URL }}save_publish_info/',
                    method: 'post',
                    data: {
                        'publish_company_name': $("#publish_company_name").val(),
                        'publish_demand': editor.getContent(),
                        'publish_activity_name': $('#publish_activity_name').val(),
                        'publish_datetime': publish_datetime,
                        'publish_location': $("#publish_location").val(),
                        'publish_person_num': $("#publish_person_num").val(),
                        'publish_id': $('#publish_id').val(),
                        'csrfmiddlewaretoken': "{{ csrf_token }}"
                    },
                    success: function (response) {
                        if (response['result']) {
                            new bkMessage({
                                message: response['message'],
                                theme: 'success'
                            })
                            $('#publishModal').modal('hide')
                            activityTable.ajax.reload(null, false)
                        } else {
                            // 失败处理
                            new bkMessage({
                                message: response['message'],
                                theme: 'error',
                                delay: 3000
                            });
                            $('#publishModal').modal('hide')
                            activityTable.ajax.reload(null, false)
                        }
                    }
                })
            }

        }

        $('#publishModal').on('hide.bs.modal', function () {
            document.getElementById("validate_form_publish").reset();
            $("#validate_form_publish").validate().resetForm();
            $("#publish_company_name").val("");
            editor.setContent("");
            $("#publish_activity_name").val("");
            $("#publish_datetime").val("");
            $("#pulish_location").val("");
            $("#publish_person_num").val("");
            var active = true;
            $('#publish_id').val();
        });
        // publish_js_end

        //表格(DataTables)
        var language = {
            search: "搜索：",
            lengthMenu: "每页显示 _MENU_ 记录",
            zeroRecords: "没找到相应的数据！",
            info: "分页 _PAGE_ / _PAGES_ 共 _TOTAL_ 条",
            infoEmpty: "暂无数据！",
            infoFiltered: "(从 _MAX_ 条数据中搜索)",
            paginate: {
                first: "首页",
                last: "尾页",
                previous: "上一页",
                next: "下一页",
            }
        }
        var activityTable = $('#activity').DataTable({
            sProcessing: '<img alt="loadding" src="https://magicbox.bk.tencent.com/static_api/v3/components/loading1/images/loading_2_36x36.gif">', //这里很重要，如果你的加载中是文字，则直接写上文字即可，如果是gif的图片，使用img标签就可以加载
            pagingType: "full_numbers",
            paging: false, //隐藏分页
            ordering: false, //关闭排序
            info: false, //隐藏左下角分页信息
            searching: false, //关闭搜索
            pageLength: 10, //每页显示几条数据
            lengthChange: false, //不允许用户改变表格每页显示的记录数
            language: language, //汉化
            serverSide: true,
            lengthMenu: [20, 10, 25, 50, 75, 100, 7],
            ajax: {
                url: "{{ SITE_URL }}get_activity_list/",
                method: "get",
                dataType: 'json',

                dataSrc: function (json) {
                    json.activitiesTotal = json.data.info.activitiesTotal;
                    json.activitiesFiltered = json.data.info.activitiesFiltered;
                    json.data = json.data.info.data

                    return json.data;
                },
            },
            columnDefs: [{
                targets: 0,
                data: "publish_company_name",
            },
            {
                targets: 1,
                data: "publish_demand",
            },
            {
                targets: 2,
                data: "publish_activity_name",
            },
            {
                targets: 3,
                data: "publish_datetime",
            },
            {
                targets: 4,
                data: "publish_location",
            },
            {
                targets: 5,
                data: "publish_person_num",
            },
            {
                targets: 6,
                data:"apply_person_num",
            },
            {
                targets: 7,
                data:"pass_person_num",
            },

            ]
        });
        setInterval(function () {
            activityTable.ajax.reload(null, false); // user paging is not reset on reload
        }, 3000);

      

        // diaplayActivityModal_js_start
        function displayActivityModal(id) {
            $.ajax({
                url: '{{ SITE_URL }}get_activity_display_info/' + id,
                method: 'get',
                success: function (response) {
                    if (response['result']) {
                        $("#display_publish_company_name").html(response.data.info.data.publish_company_name);
                        $("#display_publish_demand").html(response.data.info.data.publish_demand);
                        $("#display_publish_activity_name").html(response.data.info.data.publish_activity_name);
                        $("#display_publish_datetime").html(response.data.info.data.publish_datetime);
                        $("#display_publish_location").html(response.data.info.data.publish_location);
                        $("#display_publish_person_num").html(response.data.info.data.publish_person_num);
                        $("#display_create_time").html(response.data.info.data.create_time);
                    } else {
                        // 失败处理
                        new bkMessage({
                            message: response['message'],
                            theme: 'error',
                            delay: 3000
                        });
                    }
                }
            })
        }

    // diaplayActivityModal_js_end


    </script>
    {% endblock %}
</body>